<template>
  <div class="ma-content-block lg:flex justify-between">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm" @resetSearch="resetSearch">
      <template #tableSearch>
        <a-col :span="6">
          <a-form-item field="user" label="会员账号">
            <a-input allow-clear v-model="searchForm.user" placeholder="会员账号" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        
        <a-col :span="6">
          <a-form-item field="uid" label="会员UID">
            <a-input allow-clear v-model="searchForm.uid" placeholder="会员UID" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
      </template>
      <!-- 操作前置扩展 -->
      <template #operationAfterExtend="{ record }">

      </template>
    </sa-table>
    <!-- 编辑表单 -->
    <edit-form ref="editRef" @success="refresh" />
    <sa-operation :visible="operation.visible" @cancel="operation.visible = false" :pwdTxt="operation.pwdTxt"
      :show_google="true" :api="operation.api" :id="operation.id" @ok="refresh">
    </sa-operation>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import memberApi from '@/api/system/member'
import { Message } from '@arco-design/web-vue'
import SaOperation from '@cps/sa-operation/index.vue'
import SaTable from '@cps/sa-table/index.vue'
import { throttle } from 'lodash';
import { useRouter } from 'vue-router';
import EditForm from './edit.vue'
const submitLoading = ref(false)
const router = useRouter()
const crudRef = ref()
const editRef = ref()
const operationRef = ref()
const visible = ref(false)
const operation = ref({
  visible: false,
  api: null,
  id: null,
  pwdTxt: '',
})
const searchForm = ref({
  user: '',
  uid:'',
})
const options = reactive({
  api: memberApi.member_white_list,//表格数据接口
  operationColumnWidth: 120,//操作欄
  columnAlign: 'center',
  pageSimple: false,
  add: {//頂部新增按鈕
    show: true,
    auth: ['/core/menu/save'],
    func: async () => {
      editRef.value?.open()
    },
  },
  edit: {//操作欄编辑按鈕
    show: true,
    auth: ['/core/menu/update'],
    func: async (record) => {
      editRef.value?.open('edit',record)
      editRef.value?.setFormData(record)
    },
  },
  delete: {//操作欄和頂部刪除按鈕
    show: true,
    auth: ['/core/menu/destroy'],
    func: (params) => {
      console.log('111', params);
      operation.value.id = params.ids[0]
      operation.value.api = memberApi.member_white_list_del
      operation.value.pwdTxt = 'admin_pay_password'
      operation.value.visible = true
    }
  },
  isExpand: false,//展開所有子樹
})

const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 100 },
  { title: 'UID', dataIndex: 'user_id', width: 180 },
  { title: '会员账号', dataIndex: 'user_name', width: 100 },
  { title: '会员姓名', dataIndex: 'true_name', width: 180 },
  { title: '创建时间', dataIndex: 'create_time', width: 180 },
  { title: '添加管理员', dataIndex: 'admin_name', width: 180 },
])

const initPage = async () => { }
const refresh = async () => {
  crudRef.value?.refresh()
}
const roleList = ref([])
// 获取角色组
const getParams = async () => {

}



onMounted(async () => {
  getParams()
  initPage()
  refresh()
})
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>
